<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>

  *{
   margin:0;
   padding:0
  }
  #box{
    width: 100px;
    height: 100px;
   
  }
  </style>
</head>

<body>
  <div id ="box" style="background-color: red;">
      box
  </div>

</body>

  <script>
  //通过js修改样式
  //.style.background
  var box = document.querySelector('#box');
  console.log(box.style);
  //对象值的获取
  //.属性名
  console.log(box.style.backgroundColor);
  //属性的赋值
  //通过属性赋值的方式  是行内样式
  // 获取的也是行内样式 ,不是最终的展示结果
  box.style.backgroundColor='blue';
  box.style.fontSize ='100px';
  console.log(box.style.width);

  //获取真是的最终样式
  // getComputedStyle 计算属性  获取元素的最终样式
  var boxStyle = getComputedStyle(box);
  console.log(boxStyle.width);
  //对象的属性  命名不能用 '-'; 所以 font-size 变成 fontSize  backgroundColor zIndex 
  // backgroundColor fontSize 
  </script>
</html>